<template>
  <div class="preview" :style="{ padding: label ? '7px 16px 16px' : '16px' }">
    <el-tooltip v-if="label" :content="label" placement="top" effect="light">
      <div class="form-label">
        {{ label }}
      </div>
    </el-tooltip>
    <el-input
      v-if="type === 'text'"
      v-model.trim="value"
      :placeholder="placeholder ? placeholder : '请输入内容'"
      :maxlength="50"
      show-word-limit
    ></el-input>
    <el-input
      type="textarea"
      :rows="2"
      :maxlength="300"
      show-word-limit
      v-if="type === 'multi-text'"
      v-model.trim="value"
      :placeholder="placeholder ? placeholder : '请输入内容'"
    ></el-input>
    <el-radio-group v-if="type === 'radio' && styleType === 'tile'" v-model="value">
      <el-radio :label="item.key" v-for="item in options" :key="item.key">{{ item.value }}</el-radio>
    </el-radio-group>
    <el-select
      v-if="(type === 'multi-select' || type === 'radio') && styleType === 'dropdown'"
      v-model="value"
      :multiple="type === 'multi-select'"
      :placeholder="placeholder ? placeholder : '请选择'"
      :options="options"
      style="width: 100%"
      clearable
      filterable
    >
      <el-option v-for="item in options" :key="item.key" :label="item.value" :value="item.key"> </el-option>
    </el-select>
    <div v-if="type === 'multi-select' && styleType === 'tile'">
      <el-checkbox v-for="item in options" :key="item.key" :label="item.key" v-model="item.isDefault">{{
        item.value
      }}</el-checkbox>
    </div>
    <el-input-number v-if="type === 'number'" v-model="value" step-strictly :step="1" :min="1"> </el-input-number>
    <el-cascader
      v-if="type === 'cascade'"
      clearable
      filterable
      v-model="value"
      :options="options.children"
      :props="caProps"
      collapse-tags
      :placeholder="placeholder ? placeholder : '请选择'"
    >
    </el-cascader>
    <el-date-picker
      v-if="type === 'datetime' && styleType === 'day'"
      v-model="value"
      type="date"
      :placeholder="placeholder ? placeholder : '请选择日期'"
    >
    </el-date-picker>
    <el-date-picker
      v-if="type === 'datetime' && styleType === 'second'"
      v-model="value"
      type="datetime"
      :placeholder="placeholder ? placeholder : '请选择日期时间'"
    >
    </el-date-picker>
    <el-date-picker
      v-if="type === 'datetime-range' && styleType === 'day'"
      v-model="value"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <el-date-picker
      v-if="type === 'datetime-range' && styleType === 'second'"
      v-model="value"
      type="datetimerange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    >
    </el-date-picker>
    <template v-if="type === 'pairs'">
      <div v-for="(item, index) in group" :key="index" class="more-input">
        <el-input
          v-model.trim="item.value"
          clearable
          :placeholder="placeholder ? placeholder : '请输入内容'"
          :maxlength="50"
        />
        <el-input
          v-model.trim="item.memo"
          clearable
          placeholder="请输入备注"
          style="margin-left: 16px"
          :maxlength="50"
        />
        <span
          v-if="group && group.length && index === 0"
          class="MC_iconfont MC_icon-tianjia-yuan-xian"
          style="color: var(--mc-main-color)"
          @click="add"
        ></span>
        <span v-else @click="remove(index)" class="MC_iconfont MC_icon-shanchu2-xian"></span>
      </div>
    </template>
  </div>
</template>

<script lang="ts">
/**
 * 预览组件
 * }
 */

import { computed, defineComponent, reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
interface State {
  group: Record<string, unknown>[]
  options: Record<string, unknown>[]
}
export default defineComponent({
  name: 'PreviewCom',
  props: {
    label: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    styleType: {
      type: String,
      default: 'dropdown'
    },
    fillLevel: {
      // 级联： 必选全部层级
      type: Boolean,
      default: false
    },
    placeholder: {
      // 提示暗文
      type: String,
      default: ''
    }
  },
  setup(props) {
    const value = ref()

    const state: State = reactive({
      group: [{}],
      options: []
    })

    const caProps = computed(() => {
      return {
        checkStrictly: !props.fillLevel,
        label: 'value',
        value: 'key',
        multiple: !props.fillLevel && props.styleType === 'multi'
      }
    })

    const setData = (data: any) => {
      state.options = data || []
      if (props.type === 'multi-select') {
        // 多选初始化值为[]
        value.value = []
      }
      if (data && data.length) {
        data.forEach((item: any) => {
          if (props.type === 'radio' && item.isDefault) {
            // 单选默认赋值
            value.value = item.key
          } else if (props.type === 'multi-select' && item.isDefault) {
            // 多选默认赋值
            value.value.push(item.key)
          }
        })
      }
    }

    const remove = (index: number) => {
      state.group.splice(index, 1)
    }

    const add = () => {
      if (state.group && state.group.length > 9) {
        return ElMessage.error('最多允许添加10个')
      }
      state.group.push({})
    }

    return {
      caProps,
      value,
      add,
      remove,
      setData,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.preview
  width 100%
  background var(--mc-gray2-color)
  border-radius 4px
  .form-label
    width 496px
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
  :deep(.el-cascader)
    width 100%
  :deep(.el-input)
    width 100%
  :deep(.el-input__wrapper)
    width 100%
    box-sizing border-box
  .more-input
    display flex
    align-items center
    margin-bottom 8px
    &:last-child
      margin-bottom: 0
    span
      cursor pointer
      margin-left 16px
      &.MC_icon-shanchu2-xian
        color rgba(0, 0, 0, 0.38)
</style>
